﻿@{
    Layout = "~/Views/Shared/_Layout_Pear_Layui.cshtml";
}

@section Styles {
    <link href="~/pear/admin/css/other/profile.css" rel="stylesheet" />
}

<div class="layui-row layui-col-space10">
    <div class="layui-col-md3">
        <div class="layui-card">
            <div class="layui-card-body" style="padding: 25px;">
                <div class="text-center layui-text">
                    <div class="user-info" id="userInfoHead">
                        <img src="~/pear/admin/images/avatar.jpg" id="userAvatar" width="115" height="115"
                             alt="">
                    </div>
                    <h2 class="user-name">就眠仪式</h2>
                    <p class="user-home">China ， 中国</p>
                </div>
            </div>
            <div class="user-desc">
                <span>今日事 ，今日毕</span>
            </div>
        </div>

        <div class="layui-card">
            <div class="layui-card-header">留言板</div>
            <div class="layui-card-body">
                <ul class="message-board">
                    <li>
                        <p>快乐的时候不敢尽兴，频繁警戒自己保持清醒。</p>
                        <span>4月30日 22:43</span>
                        <a href="javascript:;" data-id="1"
                           class="layui-btn layui-btn-primary layui-btn-xs message-board-reply">回复</a>
                    </li>
                    <li>
                        <p>夏天真的来了，尽管它还有些犹豫。</p>
                        <span>4月30日 22:43</span>
                        <a href="javascript:;" data-id="1"
                           class="layui-btn layui-btn-primary layui-btn-xs message-board-reply">回复</a>
                    </li>
                    <li>
                        <p>要不要作为我的家人，搬来我家。</p>
                        <span>12月25日 19:92</span>
                        <a href="javascript:;" data-id="1"
                           class="layui-btn layui-btn-primary layui-btn-xs message-board-reply">回复</a>
                    </li>
                    <li>
                        <p>接近，是我对一切的态度，是我对一切态度的距离</p>
                        <span>6月11日 15:33</span>
                        <a href="javascript:;" data-id="1"
                           class="layui-btn layui-btn-primary layui-btn-xs message-board-reply">回复</a>
                    </li>
                    <li>
                        <p>没有锚的船当然也可以航行，只是紧张充满你的一生。</p>
                        <span>2月09日 13:40</span>
                        <a href="javascript:;" data-id="1"
                           class="layui-btn layui-btn-primary layui-btn-xs message-board-reply">回复</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="layui-col-md9">
        <div class="layui-card">
            <div class="layui-card-header">
                我的文章
            </div>
            <div class="layui-card-body">
                <div class="layui-row layui-col-space10" style="margin: 15px;">
                    <div class="layui-col-md1">
                        <img src="~/pear/admin/images/blog.jpg"
                             style="width: 100%;height: 100%;border-radius: 5px;" />
                    </div>
                    <div class="layui-col-md11" style="height: 80px;">
                        <div class="blog-title">为什么程序员们愿意在GitHub上开源自己的成果给别人免费使用和学习？</div>
                        <div class="blog-content">
                            “Git的精髓在于让所有人的贡献无缝合并。而GitHub的天才之处，在于理解了Git的精髓。”来一句我们程序员们接地气的话：分享是一种快乐~
                        </div>
                    </div>
                </div>
                <div class="layui-row layui-col-space10" style="margin: 15px;">
                    <div class="layui-col-md1">
                        <img src="~/pear/admin/images/blog.jpg"
                             style="width: 100%;height: 100%;border-radius: 5px;" />
                    </div>
                    <div class="layui-col-md11" style="height: 80px;">
                        <div class="blog-title">为什么程序员们愿意在GitHub上开源自己的成果给别人免费使用和学习？</div>
                        <div class="blog-content">
                            “Git的精髓在于让所有人的贡献无缝合并。而GitHub的天才之处，在于理解了Git的精髓。”来一句我们程序员们接地气的话：分享是一种快乐~
                        </div>
                    </div>
                </div>
                <div class="layui-row layui-col-space10" style="margin: 15px;">
                    <div class="layui-col-md1">
                        <img src="~/pear/admin/images/blog.jpg"
                             style="width: 100%;height: 100%;border-radius: 5px;" />
                    </div>
                    <div class="layui-col-md11" style="height: 80px;">
                        <div class="blog-title">为什么程序员们愿意在GitHub上开源自己的成果给别人免费使用和学习？</div>
                        <div class="blog-content">
                            “Git的精髓在于让所有人的贡献无缝合并。而GitHub的天才之处，在于理解了Git的精髓。”来一句我们程序员们接地气的话：分享是一种快乐~
                        </div>
                    </div>
                </div>
                <div class="layui-row layui-col-space10" style="margin: 15px;">
                    <div class="layui-col-md1">
                        <img src="~/pear/admin/images/blog.jpg"
                             style="width: 100%;height: 100%;border-radius: 5px;" />
                    </div>
                    <div class="layui-col-md11" style="height: 80px;">
                        <div class="blog-title">为什么程序员们愿意在GitHub上开源自己的成果给别人免费使用和学习？</div>
                        <div class="blog-content">
                            “Git的精髓在于让所有人的贡献无缝合并。而GitHub的天才之处，在于理解了Git的精髓。”来一句我们程序员们接地气的话：分享是一种快乐~
                        </div>
                    </div>
                </div>
                <div class="layui-row layui-col-space10" style="margin: 15px;">
                    <div class="layui-col-md1">
                        <img src="~/pear/admin/images/blog.jpg"
                             style="width: 100%;height: 100%;border-radius: 5px;" />
                    </div>
                    <div class="layui-col-md11" style="height: 80px;">
                        <div class="blog-title">为什么程序员们愿意在GitHub上开源自己的成果给别人免费使用和学习？</div>
                        <div class="blog-content">
                            “Git的精髓在于让所有人的贡献无缝合并。而GitHub的天才之处，在于理解了Git的精髓。”来一句我们程序员们接地气的话：分享是一种快乐~
                        </div>
                    </div>
                </div>
                <div class="layui-row layui-col-space10" style="margin: 15px;">
                    <div class="layui-col-md1">
                        <img src="~/pear/admin/images/blog.jpg"
                             style="width: 100%;height: 100%;border-radius: 5px;" />
                    </div>
                    <div class="layui-col-md11" style="height: 80px;">
                        <div class="blog-title">为什么程序员们愿意在GitHub上开源自己的成果给别人免费使用和学习？</div>
                        <div class="blog-content">
                            “Git的精髓在于让所有人的贡献无缝合并。而GitHub的天才之处，在于理解了Git的精髓。”来一句我们程序员们接地气的话：分享是一种快乐~
                        </div>
                    </div>
                </div>
                <div class="layui-row layui-col-space10" style="margin: 15px;">
                    <div class="layui-col-md1">
                        <img src="~/pear/admin/images/blog.jpg"
                             style="width: 100%;height: 100%;border-radius: 5px;" />
                    </div>
                    <div class="layui-col-md11" style="height: 80px;">
                        <div class="blog-title">为什么程序员们愿意在GitHub上开源自己的成果给别人免费使用和学习？</div>
                        <div class="blog-content">
                            “Git的精髓在于让所有人的贡献无缝合并。而GitHub的天才之处，在于理解了Git的精髓。”来一句我们程序员们接地气的话：分享是一种快乐~
                        </div>
                    </div>
                </div>
                <div class="layui-row layui-col-space10" style="margin: 15px;">
                    <div class="layui-col-md1">
                        <img src="~/pear/admin/images/blog.jpg"
                             style="width: 100%;height: 100%;border-radius: 5px;" />
                    </div>
                    <div class="layui-col-md11" style="height: 80px;">
                        <div class="blog-title">为什么程序员们愿意在GitHub上开源自己的成果给别人免费使用和学习？</div>
                        <div class="blog-content">
                            “Git的精髓在于让所有人的贡献无缝合并。而GitHub的天才之处，在于理解了Git的精髓。”来一句我们程序员们接地气的话：分享是一种快乐~
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    <script>
        layui.use(['jquery', 'element', 'layer', 'tools'], function () {
            var element = layui.element,
                layer = layui.layer,
                $ = layui.jquery,
                tools = layui.tools;

            let MODULE_PATH = "operate/";

            var image = new Image();
            image.src = "~/pear/admin/images/avatar.jpg";
            image.onload = function () {
                $("#userAvatar").attr("src", tools.imageToBase64(image));
            }

            window.callback = function (data) {
                layer.close(data.index);
                $("#userAvatar").attr("src", data.newAvatar);
            }

            $("#userAvatar").click(function () {
                layer.open({
                    type: 2,
                    title: '更换图片',
                    shade: 0.1,
                    area: ["900px", "500px"],
                    content: MODULE_PATH + 'profile.html',
                    btn: ['确定', '取消'],
                    yes: function (index, layero) {
                        window['layui-layer-iframe' + index].submitForm();
                    }
                });
            });
        });
    </script>
}